<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>样式编辑</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <style>
        .Modular {
            width: 100%;
            margin: 0px 0px 10px 0px;
            padding: 20px 0px;
            background: #fff;
        }

        .Modular>div {
            width: 80% !important;
            margin: auto;
        }

        .m {
            width: 80%;
            height: 540px;
            margin: auto;
            margin-top: 20px;
        }

        .m_cover {
            position: relative;
            display: inline-block;
            width: 73%;
        }

        .m_cover img {
            width: 100%;
        }

        .m_edit {
            width: 25%;
            background: #fff;
            float: right;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
        }

        .m_author {
            width: 73%;
            height: 185px;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            margin-top: 20px;
        }

        .m_dec {
            width: 100%;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            margin-top: 20px;
        }

        .m_edit .layui-tab {
            margin: 5px 0px;
        }

        .m_edit .layui-this:after {
            border-bottom: 0px !important;
        }

        .m_edit .layui-tab-title {
            border-bottom-style: none;
        }

        .m_edit .layui-tab-title li {
            background: #e8e8e8;
            width: 47%;
            box-sizing: border-box;
            margin-left: 2%;
            border-radius: 4px;
        }

        .m_edit .layui-this {
            background: #1E9FFF !important;
            color: #fff !important;
        }

        .m_c,
        .m_edit_btn {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        .m_c {
            height: 195px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .m_c img {
            width: 100%;
            height: 100%;
            opacity: .6;
        }

        .m_edit_btn button {
            width: 30%;
        }

        .m_title {
            line-height: 40px;
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            height: 40px;
            text-indent: 2px;
        }

        .m_edit .layui-textarea {
            min-height: 150px;
        }

        .m_edit_btn {
            padding: 10px 20px;
        }

        .m_edit_btn2 {
            margin-top: 125px;
        }

        .m_edit_btn2 button {
            width: 30%;
        }

        .m_name {
            font-size: 20px;
            font-weight: bold;
            width: 50%;
            height: 60px;
            line-height: 60px;
            text-indent: 20px;
        }

        .m_data {
            width: 50%;
            float: right;
            height: 60px;
        }

        .m_data>div {
            float: right;
            margin-right: 30px;
            font-size: 16px;
            font-weight: bold;
            height: 60%;
            line-height: 60px;
        }

        .m_author_photo {
            width: 70px;
            height: 70px;
            float: left;
            margin-left: 20px;
        }

        .m_author_photo img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .m_author_name {
            float: left;
            margin-left: 15px;
            margin-top: 5px;
        }

        .m_author_name p {
            font-size: 16px;
            margin-top: 20px;
            color: #868686;
            font-weight: bold;
        }

        .m_dec .layui-this {
            color: #1E9FFF !important;
            font-weight: bold;
            font-size: 16px;
        }

        .m_dec .layui-this:after {
            border-color: #1E9FFF !important;
        }

        .m_dec_con {
            width: 100%;
            padding: 10px 0px 20px 0px;
            border-bottom: 1px #ccc solid;
        }

        .m_dec_type {
            width: 100%;
            padding: 20px 0px;
        }

        .m_dec_type>div {
            margin-bottom: 10px;
        }

        .m_dec .layui-tab-content {
            margin-left: 10px;
        }

        .l_title {
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            text-indent: 2px;
            text-align: left !important;
            padding: 9px 0 !important;
        }

        .none {
            display: none;
        }

        /*  */
        .hidden {
            display: none;
        }

        .m_c_upload {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -60px;
            margin-top: -20px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 25px;
            background: #1E9FFF;
            color: #fff;
        }

        .screenshot {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
        }

        .layui-form-select dl dd.layui-this {
            background-color: #00aeff !important;
        }

        .layui-form-radioed>i,
        .layui-form-radio>i:hover {
            color: #00aeff !important;
        }

        #m_cover_app {
            width: 100%;
            height: 600px;
            position: relative;
        }

        #m_cover_app i {
            position: absolute;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            font-size: 25px;
        }

        .totalOut {
            display: none;
        }

        .m_dec_title {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0px;
        }

        .layui-form-item .layui-form-label {
            white-space: unset !important;
        }
    </style>
</head>

<body style="width: 100%;padding: 0px; background-color: #eaeaea;">

    <div class="m">
        <div class="m_cover">
            <!--截屏按钮-->
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal screenshot"><i
                    class="layui-icon ">&#xe65d;</i> 保存封面
            </button>
            <div id="m_cover_app">
                <iframe style="background: #000" frameborder="none" width="100%" height="100%" id="cesiumIfm"></iframe>
                <!--全屏-->
                <i class="layui-icon totalIn">&#xe622;</i>
                <i class="layui-icon totalOut">&#xe758;</i>
            </div>
        </div>

        <form class="m_edit layui-form" action="">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                    <li>样式编辑</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="m_title">名称</div>
                        <input type="text" name="title" placeholder="请输入模板名称" autocomplete="off"
                            class="layui-input name">
                        <div class="m_title">描述</div>
                        <textarea type="text" name="title" placeholder="请输入模板描述" autocomplete="off"
                            class="layui-textarea desc"></textarea>
                        <div class="m_title">封面</div>
                        <div class="m_c">
                            <img>
                            <div class="m_c_upload"><i class="layui-icon">&#xe61f;</i>上传封面</div>
                        </div>
                    </div>
                    <div class="layui-tab-item layui-form" lay-filter="sEdit">

                        <div class="layui-form-item">
                            <label class="layui-form-label l_title">数据选择</label>
                            <div class="layui-input-block">
                                <select name="sjlx" lay-filter='sjlx'>
                                    <option value="0">公开</option>
                                    <option value="1">私有</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label l_title">数据样式分类</label>
                            <div class="layui-input-block">
                                <select name="styletype" id="dataStyle" lay-filter='dataStyle'>
                                    <option value="point">点样式</option>
                                    <option value="polyline">线样式</option>
                                    <option value="polygon">面样式</option>
                                    <option value="model">模型样式</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <select name="sjmc" lay-filter="sjmc" lay-search>
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <iframe id="Content" name="Content" width="100%" scrolling="no"
                            style="border:none;overflow:visible;min-height: 250px;" src="PointEdit.html"></iframe>
                    </div>
                </div>
                <div class="m_edit_btn">
                    <button type="button" class="layui-btn layui-btn-normal">重置</button>
                    <button type="button" class="layui-btn layui-btn-normal release">发布</button>
                    <button type="button" class="layui-btn layui-btn-normal save">保存</button>
                </div>
            </div>
        </form>
        <div class="m_author">
            <div class="m_name">-----</div>
            <div class="m_author_photo">
                <img src="../../static/IMG/Mould/m_author.png">
            </div>
            <div class="m_author_name">
                <p></p>
            </div>
        </div>
        <div class="m_cover"
            style=" background: #fff; box-shadow: 3px 6px 11px 0 #d4d4d4;margin-top: 20px; padding-left: 20px;box-sizing: border-box">
            <div class="m_dec_title">作品描述</div>
            <div class="m_dec_con">-----</div>
            <div class="m_dec_type">
                <div>
                    发布时间：<span class="m_dec_time">2020/01/02</span>
                </div>
                <div>
                    数据类型：<span>应用/演示应用</span>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="../../JS/jquery-2.0.3.js"></script>
<script src="./../../node_modules/iframeResizer.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
    var form = null;
    var sIframForm = null;
    var dataStyle = '';
    var sjlx = 0;
    var id = 0;
    $(function () {
        $('#Content').iFrameResize([{ log: true }]);

        //描述
        $('.m_edit').on('input propertychange', '.desc', function () {
            $('.m_dec_con').text($(this).val())
        })
        //名称
        $('.m_edit').on('input propertychange', '.name', function () {
            $('.m_name').text($(this).val())
        })

        //显示用户头像和昵称
        var userObj = parent.getLocalStorage('JSXM');
        $('.m_author_photo img').attr('src', userObj.userPhoto);
        $('.m_author_name p').text(userObj.userName);

        //全屏功能
        $('.totalIn').click(function () {
            $(this).hide();
            $('.totalOut').show();
            $('body').css('overflow', 'hidden');
            //获取当前屏幕的宽高
            var w = $(window).width();
            var h = $(window).height();
            //父级宽度100%
            $('.m').css({ 'width': '100%', 'margin-top': 0 });
            $('#m_cover_app').width(w).height(h).css('z-index', 1);
        })
        $('.totalOut').click(function () {
            $(this).hide();
            $('.totalIn').show();
            $('body').css('overflow-y', 'auto');
            //父级宽度100%
            $('.m').css({ 'width': '80%', 'margin-top': '20px' });
            $('#m_cover_app').width('100%').height('600px');
        })
        //获取数据id并调用接口(如果存在id则是编辑页面，无id则是新增页面)
        id = parseInt(parent.getUrlParam(window.location.search, 'id'));

        layui.use(['element', 'form', 'colorpicker'], function () {
            var $ = layui.$,
                element = layui.element,
                colorpicker = layui.colorpicker;
            form = layui.form

            if (id) {
                parent.ajaxGet(parent.defaultUrl + '/style/selStyleById', { 'id': id }, function (data) {
                    if (data.code === 200 && data.data) {
                        $('.name').val(data.data.name);
                        $('.m_name').text(data.data.name);
                        $('.desc').val(data.data.desc);
                        $('.m_dec_con').text(data.data.desc);
                        $('.m_dec_time').text(data.data.time);
                        $('.m_c img').attr('src', data.data.img || '../../static/IMG/nothumb.png');
                        key = data.data.id;
                        path = data.data.path;
                        type = data.data.type;
                        var content = JSON.parse(data.data.content);
                        if (content && typeof content === 'object') {
                            //获取数据样式类型跳转页面
                            typeToIfm(content.sEdit.styletype, parseInt(content.sEdit.sjlx), function () {
                                form.val('sEdit', content.sEdit);
                                if (content.sEdit.sjmc && content.sEdit.sjmc !== '请选择') {
                                    getDataById(parseInt(content.sEdit.sjmc))
                                } else {
                                    $('#cesiumIfm').attr('src', '../../Cesium/index.html')
                                }

                            });
                            sIframForm = content.sIfram;
                            //是哪个类型的样式
                            sIframForm.d_type = data.data.type;
                        }
                    }
                });
            } else {
                $('#cesiumIfm').attr('src', '../../Cesium/index.html')
                //默认获取共有数据下拉列表
                getDataBysjlx({
                    "condition": {
                        "openness": 0,
                        "userid": parent.getLocalStorage('JSXM').id,
                        "groupid": 0,
                        "dataType": 'point'
                    },
                    "ispage": false,
                })
            }

            // 监听数据类型选择
            form.on('select(sjlx)', function (data) {
                sjlx = parseInt(data.value);
            })

            // 监听数据样式选择
            form.on('select(dataStyle)', function (data) {
                dataStyle = data.value;
                typeToIfm(data.value, sjlx)
            })

            //监听数据选择进行展示
            form.on('select(sjmc)', function (data) {
                var id = parseInt(data.value);
                getDataById(id)
            })

            // 监听文本点中的文字背景按钮
            //监听指定开关
            form.on('switch(fontBg)', function (data) {
                if (this.checked == true) {
                    $('#bgColor').show()
                } else {
                    $('#bgColor').hide()
                }
            });
            // 点颜色选择器
            colorpicker.render({
                elem: '#pointColor'
                , color: '#1c97f5'
                , done: function (color) {
                    $('#pointColor-input').val(color);
                }
            });
            // 点边框颜色
            colorpicker.render({
                elem: '#pBorderColor'
                , color: '#1c97f5'
                , done: function (color) {
                    $('#pBorderColor-input').val(color);
                }
            });

        });

        $('.screenshot').click(function () {
            parent.screenshots($('#cesiumIfm').contents().find('#cesiumContainer')[0], function (base64, blob) {
                $('.m_c img').attr('src', base64);
                imgBlob = blob
            });
        })
        //上传封面触发事件
        $('.m_c_upload').click(function () {
            parent.screenshots($('#cesiumIfm').contents().find('#cesiumContainer')[0], function (base64, blob) {
                $('.m_c img').attr('src', base64);
                imgBlob = blob
            });
        })
        //发布应用
        $('.release').click(function () {
            var content = getStyleFormData();
            parent.sysPopupf('发布设置', parent.$('#fbLevel'), 400, 360, null, ['发布', '取消'], function (index, layero) { //调用进入审核接口
                if (parent.getLocalStorage('JSXM') && parent.getLocalStorage('JSXM').id) {
                    var obj = {};
                    obj.content = content;
                    obj = $.extend(obj, {
                        'objid': id || 0,
                        "openness": parent.openness,
                        "openstaff": '',
                        'shuserid': parent.getLocalStorage('JSXM').id,
                        "desc": $('.desc').val(),
                        "name": $('.name').val(),
                        // "path": path,
                        "type": d_type,
                        "status": 0,
                    })

                    if (!imgBlob) {
                        parent.ajaxPost(parent.defaultUrl + '/style/insertCheckStatus', {
                            'objid': id || 0,
                            "openness": parent.openness,
                            "openstaff": '',
                            'shuserid': parent.getLocalStorage('JSXM').id,
                            "content": JSON.stringify(obj),
                            "desc": $('.desc').val(),
                            "name": $('.name').val(),
                            // "path": path,
                            "type": d_type,
                            "status": 0,
                            "img": $('.m_c').find('img').attr('src')
                        }, function (data) {
                            if (data.code === 200) {
                                parent.layer.msg('发布成功，等待审核');
                            } else if (data.message) {
                                parent.layer.msg(data.message)
                            }
                        })
                    } else {
                        //调用上传接口
                        var formdata = new FormData();
                        formdata.append("file", imgBlob);
                        parent.ajaxFile(parent.defaultUrl + '/file/imgs', formdata, function (data) {
                            if (data.code === 200) {
                                parent.ajaxPost(parent.defaultUrl + '/style/insertCheckStatus', {
                                    'objid': id || 0,
                                    "openness": parent.openness,
                                    "openstaff": '',
                                    'shuserid': parent.getLocalStorage('JSXM').id,
                                    "content": JSON.stringify(obj),
                                    "desc": $('.desc').val(),
                                    "name": $('.name').val(),
                                    // "path": path,
                                    "type": d_type,
                                    "status": 0,
                                    "img": data.data
                                }, function (data) {
                                    if (data.code === 200) {
                                        parent.layer.msg('发布成功，等待审核');
                                    } else if (data.message) {
                                        parent.layer.msg(data.message)
                                    }
                                })
                            }
                        })
                    }
                }
                parent.layer.close(index)
            })
        })

        //保存应用
        $('.save').click(function () {
            var content = JSON.stringify(getStyleFormData());
            //判断是新增还是更新
            if (id) {
                dataFn(parent.defaultUrl + '/style/updateStyle', {
                    "desc": $('.desc').val(),
                    "id": id,
                    // "label": [0],
                    "name": $('.name').val(),
                    "path": path,
                    "type": d_type,
                    "status": 2,
                    "content": content
                })
            } else {
                dataFn(parent.defaultUrl + '/style/insertStyle', {
                    "desc": $('.desc').val(),
                    // "label": [0],
                    "name": $('.name').val(),
                    "type": d_type,
                    "status": 2,
                    "content": content
                })
            }
        })
    })

    //数据的保存和发布
    var imgBlob = null;

    function dataFn(url, obj, fn) {
        //判断是否有上传图片
        if (!imgBlob) {
            obj.img = $('.m_c img').attr('src');
            upStyle(url, obj, fn);
        } else {
            //调用上传接口
            var formdata = new FormData();
            formdata.append("file", imgBlob);
            parent.ajaxFile(parent.defaultUrl + '/file/imgs', formdata, function (data) {
                if (data.code === 200) {
                    obj.img = data.data;
                    upStyle(url, obj, fn);
                }
            })
        }
    }

    //调用更新数据接口
    function upStyle(url, obj, fn) {
        //调用更新数据接口
        parent.ajaxPost(url, obj, function (data) {
            if (data.code === 200) {
                layer.msg('更新成功');
                id = data.id ? data.id : id;
            } else if (data.message) {
                layer.msg(data.message)
            }
            if (fn && typeof fn === 'function') {
                fn(data.data);
            }
        })
    }

    //获取表单数据
    var d_type = '';//样式类型
    function getStyleFormData() {
        //获取数据选择和数据样式类别
        //获取iframe下的数据 判断是否存在
        var sdata = $('#Content')[0].contentWindow.form.val('sIfram');
        var edata = {
            'sjlx': parseInt($('select[name=sjlx]').val()),
            'styletype': $('select[name=styletype]').val(),
            'sjmc': parseInt($('select[name=sjmc]').val()) || 0,
        }
        d_type = edata.styletype;
        for (key in sdata) {
            if (key === '') {
                delete (sdata[key])
            }
        }
        for (key in edata) {
            if (key === '') {
                delete (edata[key])
            }
        }

        var data = {
            'sEdit': edata,
            'sIfram': sdata
        }

        return data
    }

    //根据不同的数据类型跳转不同页面
    function typeToIfm(data, sjlx, fn) {
        var params = {
            "condition": {
                "openness": sjlx,
                "userid": parent.getLocalStorage('JSXM').id,
                "groupid": 0,
                'status': 1
            },
            "ispage": false,
        };
        dataStyle === 'model' ? params.condition.type = data : params.condition.dataType = data;
        getDataBysjlx(params, fn);
        switch (data) {
            case 'point':
                document.getElementById("Content").src = "PointEdit.html";
                break;
            case 'polyline':
                document.getElementById("Content").src = "LineEdit.html";
                break;
            case 'polygon':
                document.getElementById("Content").src = "surfaceEdit.html";
                break;
            case 'model':
                document.getElementById("Content").src = "ModelEdit.html";
                break;

        }
    }

    //获取共有私有数据
    function getDataBysjlx(param, fn) {
        parent.ajaxPost(parent.defaultUrl + '/data/selAllDataByUser', param, function (data) {
            $('select[name=sjmc]').html('<option>请选择</option>');
            if (data.code === 200) {
                for (var i = 0, l = data.data.length; i < l; i++) {
                    $('select[name=sjmc]').append(new Option(data.data[i].name, data.data[i].id));
                }
                form.render('select');
                if (fn && typeof fn === 'function') {
                    fn()
                }
            } else if (data.message) {
                layer.msg(data.message)
            }
        })
    }
    //通过id获取该数据详情 并刷新球
    function getDataById(id) {
        parent.ajaxGet(parent.defaultUrl + '/data/selDataById', { 'id': id }, function (data) {
            if (data.code === 200) {
                //假数据模拟
                window.datatype = data.data.dataType;
                $('#cesiumIfm').attr('src', '../../Cesium/index.html')
            } else if (data.message) {
                layer.msg(data.message)
            }

        })
    }
</script>

</html>